<template>
  <div class="daily-header">
    <div class="main">
      <div class="lef"></div>
      <div class="middle" @click="$router.push('/')">
        <img :src="tip" alt="tip" class="light-logo" />
        <img :src="A" class="light-logo" alt="homepage" />
      </div>
      <div class="right">
        <i class="flag-icon flag-icon-cn"></i>
        <img class="user" :src="user" alt="user" />
      </div>
    </div>
    <div class="tobar">
      <el-menu
        :default-active="activeIndex"
        class="menu"
        mode="horizontal"
        active-text-color="#1976d2"
        @select="handleSelect"
      >
        <el-menu-item index="/daily/link">
          <i class="el-icon-share"></i> 网站链接</el-menu-item
        >
        <el-menu-item index="/daily/css"
          ><i class="iconfont icon-css"></i> css</el-menu-item
        >

        <el-menu-item index="/daily/vue"
          ><i class="iconfont icon-vuejs"></i> vue</el-menu-item
        >
        <el-submenu index="/daily/component">
          <template slot="title">
            <i class="iconfont icon-fuwuzujian"></i> 组件视图</template
          >
          <el-menu-item index="/daily/component/ScrollView"
            >双向定位</el-menu-item
          >
          <el-menu-item index="/daily/component/tree">select树</el-menu-item>
        </el-submenu>
        <el-menu-item index="/daily/exercises">
          <i class="el-icon-edit-outline"></i> 练习题</el-menu-item
        >
         <el-menu-item index="/daily/jianli">
          <i class="el-icon-document"></i> 简历</el-menu-item
        >
      </el-menu>
    </div>
  </div>
</template>

<script>
import tip from "@/assets/images/logo-light-icon.png";
import A from "@/assets/images/logo-light-text.png";
import user from "@/assets/images/users/1.jpg";
export default {
  name: "Header",
  data() {
    return {
      tip,
      A,
      user,
    };
  },
  computed: {
    activeIndex() {
      return this.$route.path;
    },
  },
  methods: {
    handleSelect(v) {
      this.$router.push(v);
    },
  },
};
</script>

<style lang="scss" scoped>
.daily-header {
  position: fixed;
  width: 100%;
  min-width: 1000px;
  height: 120px;
  background-color: $topbar;
  z-index: 1;
  .main {
    height: 60px;
    padding: 0 15px;
    margin: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .middle {
      cursor: pointer;
      .light-logo {
        margin-left: 8px;
        vertical-align: middle;
      }
    }
    .right {
      .flag-icon-cn {
        font-size: 18px;
        vertical-align: middle;
      }
      .user {
        vertical-align: middle;
        width: 30px;
        border-radius: 100%;
        margin: 0 30px;
      }
    }
  }
  .tobar {
    height: 60px;
    padding: 0 100px;
    background-color: #fff;
    box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
    ::v-deep .el-menu--horizontal > .el-menu-item {
      color: #607d8b;
      font-size: 14px;
    }
  }
}
</style>